import React, { useRef, useEffect, useState } from "react";

/*
  目标: useRef

  1 获取dom的对象
  2 获取组件的实例
    1 函数组件 不能直接使用 ref 会报错， 想要拿请你使用  React.forwardRef()
      1 以前 用类组件  身上可以直接 使用ref 
      2 原因是因为 类组件 有实例 this，ref 直接在this上去挂载  但是函数组件没有实例 没有自己状态
  3 难点！！保存不需要渲染的数据

  bug 现象步骤: 
  1 如果 我先点击了一下 数字递增的按钮 触发 setNum 
  2 再次点击 停止定时器 失效！！！


  1 如果 我先点击停止定时器 生效

  原因： 
  1 1 如果 我先点击了一下 数字递增的按钮 触发 setNum ->num发生改变 ->视图发生改变 ->函数组件会被重新调用 
  2 函数组件会被重新调用  导致 里面代码重新执行 timeId 重新赋值-不再等于最开始开启定时器的对应的id

  解释：
  1 创建出来的ref 不会因为函数组件的更新->反复重新创建
  2 只有当 函数组件销毁 重新创建 的时候    ref才会重新被创建 
  3 useRef 底层实现 


*/
export default function App() {
  console.log("函数组件重新调用");
  const [num, setNum] = useState(100);

  // let timeid;  // 普通的变量而已

  const ref = useRef(null); // useRef 底层作了处理！！  创建出来的ref 不会因为函数组件的更新->反复重新创建，
  useEffect(() => {
    ref.current = setInterval(() => {
      console.log(Date.now());
    }, 1000);
  }, []);

  return (
    <>
      <div>
        <button onClick={() => clearInterval(ref.current)}>停止定时器</button>
        <button onClick={() => setNum(num + 1)}>{num}</button>
      </div>
    </>
  );
}
